<template>
	<view>
		
		<ttBar :title="goodData.isDelete?'课程过期不存在':'课程详情'" :bgColor="goodData.isDelete?'#ffffff':titleBg" :color="goodData.isDelete?'#000000':wordsColor"
		 :showZhanwei="false" titleAlign="left" :isShare="isShare">
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}"></text>
			</template>
			<template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toCar"></text>
				<!-- <text class="iconfont icon-home rIcon" :style="{'background-color':goodData.isDelete?'#ffffff':btnBg}" @tap="toHome"></text> -->
			</template>
		</ttBar>
	


		<view class="deleteBox" v-if="goodData.isDelete">
			<text class="iconfont icon-kecheng"></text>
			<text>课程过期不存在</text>
		</view>


		<view v-if="!goodData.isDelete" class="cntColumn">
			<!-- 轮播图 -->
			<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>


			<!-- 价格与标题 -->
			<goodInfo :goodData="goodData" :discountPrice="discountPrice" :showPt="true"></goodInfo>

			<!-- 课程tag -->
			<goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels>

			<!-- 课程保障 -->
			<goodGuarantee :protectList="goodData.protectList"></goodGuarantee>

			<!-- 商品评论 -->
			<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>

			<!-- 店铺卡片 -->
			<shop-card :shopInfo="goodData.store"></shop-card>

			<courseParameter :goodParameter="goodData"></courseParameter>
			<view class="htmlBox">
				<!-- 图文详情 -->
				<text class="parameterTitle">课程详情</text>
				<goodCnt :goodData="goodData"></goodCnt>
				<!-- 须知 -->
				<goodXuzhi :goodData="goodData"></goodXuzhi>
			</view>

			<goodBottom :resouceData="goodData" :discountPrice = "discountPrice"></goodBottom>
			<!-- 登录的新组件 -->
			<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
				<newlogin @tap="close"></newlogin>
			</uni-popup>
		</view>
		<qrcode-poster ref="poster" :title="goodData.name.substr(0,12)" :headerImg="goodData.img" :price="goodData.price"></qrcode-poster>
	</view>
</template>


<script>
	import COMM from "@/common/common.js";
	import goodSwiper from "@/pagesA/components/goodSwiper/goodSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import goodEvaluate from "@/pagesA/components/goodEvaluate/goodEvaluate.vue";
	import goodLabels from "@/pagesA/components/goodItem/goodLabels.vue";
	import goodGuarantee from "@/pagesA/components/goodItem/goodGuarantee.vue";
	import goodInfo from "@/pagesA/components/goodItem/goodInfo.vue";
	import goodCnt from "@/pagesA/components/goodItem/goodCnt.vue";
	import goodXuzhi from "@/pagesA/components/goodItem/goodXuzhi.vue";
	import goodBottom from "@/pagesA/components/goodItem/goodBottom.vue";
	import courseParameter from "@/pagesA/components/courseParameter/courseParameter.vue";
	import shopCard from "@/pagesA/components/shopCard/shopCard.vue";
	import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
	import {
		mapState
	} from "vuex";

	export default {

		components: {
			goodSwiper,
			statusBar,
			goodEvaluate,
			courseParameter,
			shopCard,
			goodLabels,
			goodGuarantee,
			goodInfo,
			goodCnt,
			goodXuzhi,
			goodBottom,
			QrcodePoster
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				initInfo: state => state.sys.initInfo,
				locationCity: state => state.map.locationCity
			})
		},
		data() {
			return {
				videoHeight: uni.getSystemInfoSync().screenWidth,
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				btnBg: 'rgba(0,0,0,0.5)',
				goodData: {
					name: '',
					price: 0,
					labels: [],
					running: 1,
					isDelete: 0,
					stock: 2,
					prepay: 0,
					consIncs: {
						costflow: "1.下订单并支付预约金或全款；\n2.（若该课程支持体验）咨询店铺客服预约体验；\n3.上体验课前将体验码给店铺客服进行验证；\n4.满意则（已支付预约金的订单再支付尾款后）等待开课；",
						costknow: "1.下单后，点击课程详情或订单详情“客服头像”，直接咨询店铺客服，进行预约。\n2.请在确定体验后，再将体验码交给店铺客服。体验码交给店铺客服后，视为已体验。\n3.如确定报名该课程，则需缴纳（课程价-预约金）元。\n4.若您还有其他疑问，请在工作日9:00-20:00间，拨打找培训官方客服：025-84583336。",
						costkown2: ''
					}
				},
				discountPrice:0,
				shopInfo: {
					id:0
				},
				dotsStyles: {
					width: 6,
					height: 4,
					bottom: 5,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 2
				},
				id: 0,
				gundongtop: 0,
				isShare:0
			};
		},
		methods: {
			showPoster(){
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				let _href='';
				if(this.isLogin){
					_href='url=goodDetail&id='+this.goodData.id+'&uid='+this.userInfo.userId
				}else{
					_href='url=goodDetail&id='+this.goodData.id
				}
				this.$store.dispatch("apiGetMPToken").then(res=>{
					this.$store.dispatch("apiGetMpCodeImg",{
						token:res.data.data.access_token,
						page:'pages/index/index',
						scene:_href,
						width:280
					}).then(imgRes=>{
						console.log(imgRes)
						if(imgRes.data.code==1){
							this.$refs.poster.showCanvas(imgRes.data.data)
						}else{
							
						}
						
					})
				})
			},
			
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open();
				
			},
			
			close() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.close();
				
			},
			getData() {
				uni.showLoading({
					title: '正在加载中'
				})
				if (uni.getStorageSync("toGood")) {
					this.goodData = uni.getStorageSync("toGood")
				}
				this.$store.dispatch("apiGetGoodDetailById", {
						id: this.id,
						userId: this.isLogin ? this.userInfo.userId : 0
					}).then(res => {						
						this.goodData = res.data.data;
						this.discountPrice = res.data.discountPrice
						console.log(this.discountPrice)
						this.shopInfo = res.data.data.store;
						uni.hideLoading()
					})
					.catch(err => {

					})
			},
			toCar() {
				if (this.isLogin) {
					this.toPage("car")
				} else {
					
					this.open()
					// this.toPage({
					// 	url: 'login',
					// 	to: 'car'
					// })
				}
			},
			toHome() {
				this.toPage({
					url: 'index'
				})
			},
			// 分享
			share() {
				uni.$emit("showShare", {
					type: 2, //拼团1 课程2  店铺3
					id: this.goodData.id
				})
				this.$refs.shareAction.open()
			},
			// 上传统计
			postTongji() {
				this.$store.dispatch("apiPostTongji", {
					storeId: this.shopInfo.id,
					type: 1,
					userId: this.isLogin ? this.userInfo.userId : 0
				})
			},
		},
		onLoad(cfm) {
			
			this.id = cfm.id;
			this.isShare=cfm.isShare?parseInt(cfm.isShare):0
			this.getData();
			this.$store.dispatch("getClickId",cfm);
			uni.$on("toggleGz", payload => {
				if (this.goodData.fav == 0) {
					this.goodData.fav = 1
				} else {
					this.goodData.fav = 0
				}
			})
			// 监听页面返回事件
			uni.$on('update', function(data) {
				console.log(data);
			})
			
			
			// 自动登录
			// 判断能不能获取到本地存储的'token'		
			if (uni.getStorageSync('token')) {	
				this.$store.dispatch("apiUserAutoLogin", {
					token: uni.getStorageSync('token')
				}).then(res => {
					
					setTimeout(() => {
						this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
							setTimeout(() => {
								this.$store.dispatch("timEditInfo", {
									nick: res.data.data.nickname,
									role: 2
								})
							}, 1000)
						})
						let _data={
								userId:res.data.data.userId,
								city:parseInt(this.locationCity.adcode),
								version:'MP'
							};
						this.$store.dispatch("eidtUserInfo",_data)
					}, 500)
				}).catch(res => {
					 
				})
			}

		},
		
		onPageScroll(e) {
			// this.gundongtop=e.scrollTop;
			// if (e.scrollTop > this.videoHeight && this.wordsColor=='#FFFFFF') {
			// 	this.titleBg = 'rgba(255,255,255,1)';
			// 	this.wordsColor = "#000000";
			// 	this.btnBg="rgba(255,255,255,1)";
			// } else if(e.scrollTop <= this.videoHeight && this.wordsColor=='#000000') {
			// 	this.titleBg = 'rgba(255,255,255,0)';
			// 	this.wordsColor = "#FFFFFF";
			// 	this.btnBg="rgba(0,0,0,0.5)";
			// }
		},
		onShareAppMessage(res) {
			let _href='';
			if(this.isLogin){
				_href='pagesA/goodDetail/goodDetail?id=' + this.id+'&uid='+this.userInfo.userId+ '&isShare=1'
			}else{
				_href='pagesA/goodDetail/goodDetail?id=' + this.id+ '&isShare=1'
			}
			return {
				title: this.goodData.name,
				path:_href,
				imageUrl: this.goodData.img
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		},
		onUnload() {
			uni.removeStorageSync("toGood")
		},
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
	}

	.cntColumn {
		display: flex;
		flex-direction: column;
	}

	/* #ifdef MP */
	.titleBg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

	}

	.goodTitle {
		position: fixed;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 0;
		padding-right: 28%;
		box-sizing: border-box;
		font-size: 36upx;
	}

	.backBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		left: 28upx;
	}

	.carBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		right: 28%;
	}

	/* #endif */


	.mainCnt {
		padding: 0 28upx;
	}



	.htmlBox {
		padding: 18upx 28upx 180upx 28upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;

		.parameterTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
		}

		.dtText {
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #202932;
		}
	}

	.xuzhiBox {
		padding-top: 20upx;
		display: flex;
		flex-direction: column;

		.gmTitle {
			font-size: 32upx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 10upx;
		}

		.xzTitle {
			font-size: 32upx;
			// font-weight: bold;
			color: #666666;
			margin-bottom: 10upx;
		}

		text {
			font-size: 28upx;
			margin-bottom: 10upx;
			color: #202932;
		}

		.fuwuBox {
			display: flex;

			text {
				display: block;
				width: 33.33%;
			}

		}
	}


	.rIcon {
		font-size: 44upx;
		font-weight: normal;
		margin-left: 20upx;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;

	}

	.lIcon {
		font-size: 44upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 70upx;
		border-radius: 50%;
	}

	.deleteBox {
		display: flex;
		flex-direction: column;
		padding-top: 150upx;
		width: 100%;
		align-items: center;

		.icon-kecheng {
			font-size: 120upx;
			width: 200upx;
			height: 200upx;
			background-color: #CCCCCC;
			border-radius: 50%;
			text-align: center;
			line-height: 200upx;
			color: #FFFFFF;
			margin-bottom: 40upx;
		}

		text {
			font-size: 32upx;
		}
	}
</style>
